<template>
    <div class="action-history-modal-wrapper">
        <el-dialog :model-value="props.value" :title="dialog.title" :width="dialog.width" destroy-on-close>
            <DataGrid :auto-load="autoLoad" border :native="true">
                <template #toolbar-search>
                    <div class="query-from-box">
                        <el-form :model="queryData">
                            <el-form-item>
                                <el-select v-model="queryData.actionName" clearable placeholder="行为名称">
                                    <el-option
                                        v-for="item in actionList || []"
                                        :key="item.id"
                                        :label="item.displayName"
                                        :value="item.actionName"
                                    />
                                </el-select>
                            </el-form-item>
                            <el-form-item style="width: 320px">
                                <el-date-picker
                                    v-model="beginTime"
                                    type="datetimerange"
                                    unlink-panels
                                    range-separator="-"
                                    start-placeholder="更新时间起"
                                    end-placeholder="更新时间止"
                                    value-format="YYYY-MM-DD HH:mm:ss"
                                    format="YYYY-MM-DD HH:mm:ss"
                                    :default-time="defaultTime"
                                    @change="changeDataPicker"
                                    :editable="true"
                                    :clearable="false"
                                />
                            </el-form-item>
                            <el-form-item>
                                <el-select v-model="queryData.state" placeholder="状态" clearable>
                                    <el-option
                                        v-for="(value, key) in ExecState"
                                        :key="key"
                                        :label="value"
                                        :value="key"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                </template>
                <template #default v-if="tableData.length">
                    <el-table-column type="index" label="序号" width="60" align="center" fixed />
                    <el-table-column
                        v-for="(value, key) in tableData[0].input"
                        :key="key"
                        :label="'输入参数-' + String(key)"
                        show-overflow-tooltip
                    >
                        <template #default="scope">
                            <span style="white-space: nowrap">
                                {{ scope.row.input[key] }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        v-for="(value, key) in tableData[0].output"
                        :key="key"
                        :label="'输出参数-' + String(key)"
                        show-overflow-tooltip
                    >
                        <template #default="scope">
                            <span style="white-space: nowrap">
                                {{ scope.row.output[key] }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="beginTime" label="下发时间" show-overflow-tooltip />
                    <el-table-column prop="endTime" label="返回时间" show-overflow-tooltip />
                    <el-table-column label="状态" show-overflow-tooltip>
                        <template #default="scope">
                            <span class="table-item-status" :status="ExecState[scope.row.jobState]">
                                {{ ExecState[scope.row.jobState] }}
                            </span>
                        </template>
                    </el-table-column>
                </template>
            </DataGrid>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="props.close">关闭</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { IoTDeviceService, modelThingService } from '@great/services';
import { reactive } from 'vue';
import { DataGrid } from '@great/components';
import { ExecState } from '@/utils/constant';
import type { PopupBoxProps } from '@great/utils';
import { inputEmits } from 'element-plus';

interface IProps extends PopupBoxProps {
    deviceDetail: Record<string, any>;
}
const props = defineProps<IProps>();

interface Dialog {
    title: string;
    width: number;
    detail?: Record<string, any>;
}
const dialog = reactive<Dialog>({
    title: '行为历史',
    width: 1200,
    detail: undefined
});
// 查询条件
const queryData = ref({
    proDeviceNo: props.deviceDetail?.deviceNo,
    productObject: props.deviceDetail?.objectName,
    actionName: '',
    timeLeft: '',
    timeRight: '',
    state: ''
});

const actionList = ref<any>({});
const defaultTime = ref<[Date, Date]>([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]);

const beginTime = ref([
    `${new Date()
        .toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit'
        })
        .replace(/\//g, '-')} 00:00:00`,
    `${new Date()
        .toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit'
        })
        .replace(/\//g, '-')} 23:59:59`
]);
let tableData = ref<any>([]);
const autoLoad = reactive({
    debounce: true,
    reloadDeps: [queryData],
    onLoad: async (current, size) => {
        const res = await IoTDeviceService.getActionHistory({
            current,
            size,
            ...queryData.value
        });
        tableData.value = JSON.parse(JSON.stringify(res.data.records));
        return { data: res.data.records, total: res.data.total };
    }
});
const changeDataPicker = () => {
    if (beginTime.value && beginTime.value.length) {
        queryData.value.timeLeft = beginTime.value[0];
        queryData.value.timeRight = beginTime.value[1];
    } else {
        queryData.value.timeLeft = '';
        queryData.value.timeRight = '';
    }
};
// 获取行为列表
const getModelAction = async () => {
    const res = await modelThingService.action.getModelAction(props.deviceDetail?.objectName);
    actionList.value = res.data;
};
const init = () => {
    getModelAction();
    changeDataPicker();
};
init();
</script>
<style scoped lang="scss">
.action-history-modal-wrapper {
    .query-from-box {
        display: flex;
        align-items: center;
        .el-form {
            display: flex;
            .el-form-item {
                margin-bottom: 0;
                width: 192px;
            }
            .el-form-item + .el-form-item {
                margin-left: 10px;
            }
        }
    }
    :deep(.data-grid) {
        .table-item-tag {
            display: flex;
        }
        .table-item-status {
            display: flex;
            align-items: center;
            &::before {
                content: '';
                width: 6px;
                height: 6px;
                display: inline-block;
                border-radius: 50%;
                margin-right: 5px;
            }
        }
        .table-item-status[status='待执行'] {
            &::before {
                background-color: #b3d1ff;
            }
        }
        .table-item-status[status='执行中'] {
            &::before {
                background-color: #409eff;
            }
        }
        .table-item-status[status='执行成功'] {
            &::before {
                background-color: #67c23a;
            }
        }
        .table-item-status[status='执行失败'] {
            &::before {
                background-color: #f56c6c;
            }
        }
        .table-item-status[status='执行超时'] {
            &::before {
                background-color: #e6a23c;
            }
        }
        .table-item-status[status='已取消'] {
            &::before {
                background-color: #909399;
            }
        }
    }
}
</style>
